<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>bootstrap面板测试</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container{
            margin: auto;
            margin-top: 50px;;
        }
        .remove{
            right: -46%;
            top: 25px;
            color: #b92c28;
        }
    </style>
</head>
<body>
<div class="container text-center" >
    <a href="#" id="show">点击显示</a>
    <div style="display: none" class="panelshow">
        <span class="remove glyphicon glyphicon-remove" id="closepanel"></span>
        <div class="panel panel-primary" >
            <div class="panel-heading">
                <h3 class="panel-title">常见问题</h3>
            </div>
            <div class="panel-body">
                问题1：为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx
            </div>
            <div class="panel-body">
                问题2：为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx
            </div>
            <div class="panel-body">
                问题3：为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx
            </div>
            <div class="panel-body">
                问题4：为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx为什么xxxx
            </div>

        </div>
    </div>
<!--    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">面板标题:panel-success</h3>
        </div>
        <div class="panel-body">
            这是一个基本的面板
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">面板标题:panel-info</h3>
        </div>
        <div class="panel-body">
            这是一个基本的面板
        </div>
        <div class="panel-footer" >
            页脚
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">面板标题:panel-warning</h3>
        </div>
        <div class="panel-body">
            这是一个基本的面板
        </div>
        <div class="panel-footer" >
            页脚
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">面板标题:panel-danger</h3>
        </div>
        <div class="panel-body">
            这是一个基本的面板
        </div>
        <div class="panel-footer" >
            页脚
        </div>

    </div>-->

</div>

<script src="/js/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>

<script>
   $("#show").click(function () {
       $(".panelshow").css("display","block")
   });
   $("#closepanel").click(function () {
       $(".panelshow").css("display","none")
   })
</script>
</body>
</html>